<template>
    <div class="container">
        <div class="top_card">
            <div class="h_item">
                <div class="h_item_l">
                    <i class="el-icon-s-platform" style="font-size:20px"></i>
                    <span>已绑设备</span>
                </div>
                <span class="c_title">{{ allNum }}</span>
            </div>
            <div class="h_item">
                <div class="h_item_l">
                    <i class="el-icon-top" style="font-size:20px"></i>
                    <span>今日新增</span>
                </div>
                <span class="c_title">{{ increasedNum }}</span>
            </div>
        </div>
        <div class="handle-box">
            <el-input v-model="brand" placeholder="品牌名称" class="handle-input mr10"></el-input>
            <el-input v-model="mac" placeholder="mac" class="handle-input mr10"></el-input>
            <el-input v-model="model" placeholder="型号" class="handle-input mr10"></el-input>
            <el-input v-model="userId" type="number" placeholder="用户id" class="handle-input mr10"></el-input>
            <el-input v-model="userName" placeholder="账号" class="handle-input mr10"></el-input>
            <el-date-picker
                    v-model="timeRange"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="绑定时间"
                    end-placeholder="绑定时间"
                    value-format="yyyy-MM-dd"
                    style="width: 230px; margin-right: 10px"
                >
                </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </div>

        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column type="index" :index="methodIndex" label="序号" width="55" align="center"></el-table-column>
            <el-table-column prop="brand" label="品牌名称"></el-table-column>
            <el-table-column prop="model" label="设备型号"></el-table-column>
            <el-table-column prop="mac" label="设备mac"></el-table-column>
            <el-table-column prop="userId" label="用户id" width="80" align="center"></el-table-column>
            <el-table-column prop="phoneNo" label="用户账号"></el-table-column>
            <el-table-column label="绑定时间" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime | dateFilter }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope" v-if="scope.row.loginNo != 'admin'">
                    <el-button type="text" @click="handlePersonal(scope.$index, scope.row)">查看个性设置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next,jumper"
                :current-page="pageNo"
                :page-size="pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <!-- 查看个性设置 -->
        <el-dialog class="popView" :visible.sync="showPersonal" v-if="showPersonal" width="400px" title="个性设置">
            <div class="main">
                <div class="p_row">
                    <span>姓名</span>
                    <span>{{ selItem.userName || '--' }}</span>
                </div>
                <div class="p_row">
                    <span>性别</span>
                    <span>{{ selItem.sex || '--' }}</span>
                </div>
                <div class="p_row">
                    <span>出生日期</span>
                    <span>{{ selItem.birthday || '--' }}</span>
                </div>
                <div class="p_row">
                    <span>身高(cm)</span>
                    <span>{{ selItem.height || '--' }}</span>
                </div>
                <div class="p_row">
                    <span>体重(kg)</span>
                    <span>{{ selItem.weight || '--' }}</span>
                </div>
                <div class="p_row">
                    <span>地址</span>
                    <span>{{ selItem.address || '--' }}</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            brand: null,
            mac: null,
            model: null,
            userId: null,
            userName: null,
            createTime: null,
            pageNo: 1,
            pageSize: 10,
            pageTotal: 0,
            increasedNum: 0, // 今日新增数量
            allNum: 0, //无条件查询总数
            selItem: null,
            showPersonal: false,
            timeRange:null,
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            this.$api
                .post({
                    url: '/device/pageQuery',
                    data: {
                        pageNo: this.pageNo,
                        pageSize: this.pageSize,
                        param: {
                            brand: this.brand,
                            model: this.model,
                            userId: this.userId,
                            mac: this.mac,
                            userName: this.userName,
                            createTimeStart: this.timeRange ? this.timeRange[0] + ' 00:00:00' : null,
                            createTimeEnd: this.timeRange ? this.timeRange[1] + ' 00:00:00' : null,
                        }
                    }
                })
                .then(res => {
                    if (res.code && res.code == '1001') {
                    } else {
                        this.tableData = res.data.result || [];
                        this.pageTotal = res.data.total;
                        this.increasedNum = res.data.increasedNum;
                        this.allNum = res.data.allNum;
                    }
                });
        },
        handlePersonal(index, item) {
            this.selItem = item.personalization || {};
            this.showPersonal = true;
        },
        // 触发搜索按钮
        handleSearch() {
            this.pageNo = 1;
            this.getData();
        },
        // 分页导航
        handlePageChange(val) {
            this.pageNo = val;
            this.getData();
        },
        methodIndex(index) {
            return index + 1;
        }
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 120px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.top_card {
    display: flex;
    margin-bottom: 15px;
    .h_item {
        display: flex;
        align-items: center;
        background-color: #fff;
        height: 60px;
        padding: 0 20px;
        margin-right: 40px;
        border-radius: 4px;
        border: 1px solid #999;
        .h_item_l {
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50px;
        }
        .c_title {
            width: 120px;
            text-align: center;
            font-size: 25px;
        }
    }
}
/deep/.popView {
    display: flex;
    align-items: center;
    justify-content: center;
    .el-dialog__header {
        text-align: center;
    }
    .el-dialog__body {
        padding: 0 20px 20px 20px;
    }
    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #bbb;
        border-left: 1px solid #bbb;
        box-sizing: border-box;
        .p_row {
            display: flex;
            width: 100%;
            height: 30px;
            align-items: center;
            border-bottom: 1px solid #bbb;
            box-sizing: border-box;
            span {
                height: 100%;
                flex: 1;
                text-align: center;
                border-right: 1px solid #bbb;
                box-sizing: border-box;
                line-height: 30px;
            }
        }
    }
}
</style>
